import React, { PropTypes } from 'react';
import { Menu, Popover, Tree, Row, Col, Icon } from 'antd';

import THFXIcon from '../components/common/THFXIcon';
import Menus from './Menu';
import { headerInfo } from '../config/dict';
// import Trees from './Tree';
import styles from './header.less';

const SubMenu = Menu.SubMenu;

function Header({
	userInfo,
	loginout,
	switchSider,
	siderFold,
	useMenuPopover,
	menuPopoverVisible,
	location,
	switchMenuPopover,
	navOpenKeys,
	changeOpenKeys,
}) {
	const handleClickMenu = e => e.key === 'loginout' && loginout();
	const menusProps = {
		siderFold: false,
		darkTheme: false,
		useMenuPopover,
		handleClickNavMenu: switchMenuPopover,
		location,
		navOpenKeys,
		changeOpenKeys,
	};
	return (
		<div className={styles.header}>
			{useMenuPopover
				? <Popover
					placement="bottomLeft"
					onVisibleChange={switchMenuPopover}
					visible={menuPopoverVisible}
					overlayClassName={styles.popovermenu}
					trigger="click"
					content={<Menus {...menusProps} />}
				>
					<div className={styles.button}>
						<Icon type="bars" />
					</div>
				</Popover>
				: <div className={styles.button} onClick={switchSider}>
					{/*<Icon type={siderFold ? 'menu-unfold' : 'menu-fold'} />yh*/}
					<Icon type={siderFold ? 'caret-right' : 'caret-left'} />
				</div>}
			<div className={styles.rightWarpper}>
				<div className={styles.userRole}>
					<span>{userInfo.authorityName || '管理员' }</span>
					<span>{userInfo.orgName || '华泰证券'}</span>
				</div>
				<Menu className={styles.user} mode="horizontal" onClick={handleClickMenu}>
					<SubMenu
						title={
							<span>
								{userInfo.username}
								<THFXIcon type="thfx-xiaosanjiaoxiangxia" />
							</span>
						}
					>
						<Menu.Item key="loginout">
							<a>注销</a>
						</Menu.Item>
					</SubMenu>
				</Menu>
			</div>
		</div>
	);
}

Header.propTypes = {
	userInfo: PropTypes.object.isRequired,
	loginout: PropTypes.func.isRequired,
	switchSider: PropTypes.func.isRequired,
	siderFold: PropTypes.bool.isRequired,
	useMenuPopover: PropTypes.bool.isRequired,
	menuPopoverVisible: PropTypes.bool.isRequired,
	location: PropTypes.object.isRequired,
	switchMenuPopover: PropTypes.func.isRequired,
	// navOpenKeys: PropTypes.array.isRequired,
	changeOpenKeys: PropTypes.func.isRequired,
};

Header.defaultProps = {
};

export default Header;
